<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Session Login</title>
    </head>
    <body>
        <div id="root">
            <div>用户名：<input v-model="username" /></div>

            <div>密码：<input v-model="password" /></div>

            <div>
                <button @click="login">Login</button>
                <button @click="logout">Logout</button>
                <button @click="getUser">GetUser</button>
            </div>

            <div>
                <button @click="logs=[]">Clear Log</button>
            </div>

            <!-- 日志 -->
            <ul>
                <li v-for="(log, index) in logs" :key="index">{{ log }}</li>
            </ul>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <script>
            axios.interceptors.request.use((config) => {
                return config;
            });

            // 记录日志
            axios.interceptors.response.use((response) => {
                vm.logs.push(JSON.stringify(response.data));
                return response.data;
            });

            var vm = new Vue({
                el: '#root',
                data: {
                    username: '',
                    password: '',
                    logs: [],
                },
                methods: {
                    async login() {
                        const { username, password } = this;
                        const res = await axios.post('/login', {
                            username,
                            password,
                        });
                    },
                    async logout() {
                        await axios.get('/logout');
                    },
                    async getUser() {
                        await axios.get('/users/current');
                    },
                },
            });
        </script>
    </body>
</html>
